<template>
    <div>
          <van-nav-bar
  title="详情"
  left-text="返回"
  right-text="分享"
  left-arrow
  @click-left="$router.go(-1)"
/>
      <van-image
  width="100%"
  height="15rem"
  :src="data.recipesImage"
/>
 <div>
   <van-button round color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left:27vw;width:50vw;margin-top:5vw;">
    <van-icon name="like-o" />
    <van-icon name="like" />
 收藏
</van-button>
 </div>
 <div class="d1">
    <h2>{{data.recipesName}}</h2>
    <span>{{data.browseCount}}浏览  {{data.collectCount}}收藏</span>
  </div>  
  <div class="d2"></div>
  
<van-cell-group>
  <van-field label="发布者" :value="data.nickname" readonly />
  <van-field label="菜谱类型" :value="data.recipesTypeName" readonly />
  <van-field
  rows="2"
  autosize
  label="做法"
  type="textarea"
  readonly
  :value='data.recipesPractice'
  show-word-limit
/>
</van-cell-group>
    </div>
</template>

<script>
    export default {
        props:{
           cpid:{
            type:String,
            default:''
           }
        },
        data() {
            return {
                data: '',
                sc:'true',
                 loading:false,
            }
        },
        methods: {
            details() {
                console.log(this.cpid)
                let url = `/recipes/findById/${JSON.parse(sessionStorage.getItem('user')).id}/${this.cpid}`
                this.axios.get(url).then((res) => {
                    console.log(res.data.data)
                    this.data = res.data.data
                })
            }
        },
        mounted () {
            this.details()
        },
    }
</script>

<style lang="scss" scoped>
.d1{
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    span{
        color: #ccc;
    }
}
.d2{
    background-color: #e8e8e8;
    width: 100%;
    height: 20px;
}
.d3{
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    display: flex;
    padding-left: 2rem;
    img{
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
    }
    span{
        margin-top: 0;
        margin-left: 4vw;
    }
}
</style>